<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>动态数量的文件上传</title>
		<script type="text/javascript" src="public/js/jquery-3.2.1.min.js">
		</script>
		<script type="text/javascript">
			$(function() {
				var i = 2;
				$("#addFile").click(function() {
					$(this).parent().parent().before(
						"<tr class='file'>
							<td>File" +
							i + ":</td><td><input type='file' name='file" +
							i + "'/></td></tr>" +
							"<tr class='desc'><td>Desc" +
							i + ":</td><td><input type='text' name='desc" +
							i + "'/><button id='delete" +
							i + "'>删除</button></td></tr>");
					i++;
					//删除
					$("#delete" + (i - 1)).click(function() {
						var $tr = $(this).parent().parent();
						$tr.prev("tr").remove();
						$tr.remove();
						//对i排序
						$(".file").each(function(index) {
							var n = index + 1;
							$(this).find("td:first").text("File" + n);
							$(this).find("td:last input").attr("name", "file" + n);
						});
						$(".desc").each(function(index) {
							var n = index + 1;
							$(this).find("td:first").text("Desc" + n);
							$(this).find("td:last input").attr("name", "desc" + n);
						});
					});
				});
			});
		</script>
	</head>

	<body>
		<table>
			<tr class="file">
				<td>File1:</td>
				<td><input type="file" name="file1" /></td>
			</tr>

			<td><input type="submit" id="submit" value="上传" /></td>
			<td><button id="addFile">增加</button></td>
			</tr>
		</table>
	</body>

</html>